<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/login/css/index.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="/static/login/js/ban.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/layui/lib/layui/css/layui.css">
    <script type="text/javascript" src="/static/layui/lib/layui/layui.js"></script>
    <title>登录</title>
</head>
<style>
    .layui-form-label{
        text-align: left;color: white;
    }
    .layui-input{
        background-color: transparent;border:none;border-bottom: 1px solid #e2e2e2
    }
</style>

<body style="background-color:teal;">
<canvas></canvas>
<div style="position: absolute;left: 50%;top: 50%;width: 500px;margin-left: -250px;margin-top: -200px;">
    <div style="padding: 20px;border-radius: 5px;box-shadow:5px 5px 20px #00BFFF;">
        <div class="layui-form">
            <div class="layui-form-item" style="color: gray;">
                <br><h1 align="center" style="font-size: large;color:white;">后台管理系统</h1><br>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text" id="username" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码:</label>
                <div class="layui-input-block">
                    <input type="password" id="password" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码:</label>
                <div class="layui-input-inline" style="width: 170px">
                    <input type="text" id="verifycode" class="layui-input">
                </div>
                <img src="{:captcha_src()}" id="img" onclick="reloadimg()" style="cursor:Pointer;float: right;width: 170px;height: 38px">
            </div><br>

            <div class="layui-form-item">
                <div align="center">
                    <button class="layui-btn" id="login" style="width: 100%" onclick="dologin()">登录</button>
                </div>
            </div>
        </div>
    </div>
    </div>


<script type="text/javascript">
    layui.use(['layer'], function () {   //引入layui内置jq
        $ = layui.jquery;
        layer = layui.layer;
    });

    //重新生成随机验证码
    function reloadimg(){
        $('#img').attr('src','{:captcha_src()}?rand='+Math.random());
    }

    //登录
    function dologin() {
        var username = $.trim($('#username').val());
        var pwd = $.trim($('#password').val());
        var verifycode = $.trim($('#verifycode').val());
        if (username == '') {
            layer.alert('请输入用户名', { icon: 2 });
            return;
        }
        if (pwd == '') {
            layer.alert('请输入密码', { icon: 2 });
            return;
        }
        if (verifycode == '') {
            layer.alert('请输入验证码', { icon: 2 });
            return;
        }
        $.post('dologin', { 'username': username, 'pwd': pwd ,'verifycode': verifycode}, function (res) {
            if (res.code > 0) {
                layer.alert(res.msg, { icon: 2 });
            } else {
                layer.msg(res.msg, { icon: 6 });
                setTimeout(function () { location.href = 'admin'; }, 1000);
            }
        }, 'json');
    }

    //给登录按钮添加enter事件
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            document.getElementById("login").click();
        }
    });
</script>

</body>
</html>